	class Magnifier {
		constructor(box, smallbox, bigbox, mask, lis) {
			this.oBox = box;
			this.smallBox = smallbox;
			this.bigBox = bigbox;
			this.mask = mask;
			this.oLis = lis;
			this.eventBind();
		}

		// 移进
		mouseover() {
			let that = this;
			this.smallBox.onmouseover = function() {
				that.bigBox.style.display = "block";
				that.mask.style.display = "block";
			}
		}

		// 移出

		mouseout() {
			let that = this;
			this.smallBox.onmouseout = function() {
				that.bigBox.style.display = "none";
				that.mask.style.display = "none";
			}
		}
		liBox() {
			this.smallBox.style.backgroundImage = `url(img/${this.index}.jpg)`;
			this.smallBox.style.backgroundSize = "350px 450px";
			this.bigBox.style.backgroundImage = `url(img/${this.index}.jpg)`;
			this.bigBox.style.backgroundSize = "1400px 1800px";
			for (let i = 0; i < oLis.length; i++) {
				this.oLis[i].style.backgroundImage = `url(img/${this.index}.jpg)`;
				this.oLis[i].style.backgroundSize = "80px 80px";
			}
		}

		clickli() {
			let that = this;
			for (let i = 0; i < oLis.length; i++) {
				this.oLis[i].onclick = function() {
					that.smallBox.style.backgroundImage = `url(img/${this.index}.jpg)`;
					// that.smallBox.style.backgroundSize = "350px 3500px";
					that.bigBox.style.backgroundImage = `url(img/${this.index}.jpg)`;
					that.bigBox.style.backgroundSize = "1400px 1400px";
				}
			}
		}
		mousemove() {

			let that = this;
			this.smallBox.onmousemove = function(evt) {
				let e = evt || event;

				let left = e.pageX - that.oBox.offsetLeft - that.mask.offsetWidth / 2;
				let top = e.pageY - that.oBox.offsetTop - that.mask.offsetHeight / 2;

				if (left < 0) {
					left = 0;
				}

				if (top < 0) {
					top = 0;
				}

				let maxleft = this.offsetWidth - that.mask.offsetWidth;
				if (left > maxleft) {
					left = maxleft;
				}
				let maxtop = this.offsetHeight - that.mask.offsetHeight;
				if (top > maxtop) {
					top = maxtop;
				}

				let x = that.bigBox.offsetWidth * left / that.mask.offsetWidth;
				let y = that.bigBox.offsetHeight * top / that.mask.offsetHeight;

				that.mask.style.left = left + "px";
				that.mask.style.top = top + "px";

				that.bigBox.style.backgroundPositionX = -x + "px";
				that.bigBox.style.backgroundPositionY = -y + "px";

			}
		}
		eventBind() {
			this.liBox();
			this.clickli();
			this.mouseover();
			this.mouseout();
			this.mousemove();
		}

	}
	let oBox = document.querySelector(".box");
	let oSmallBox = document.querySelector(".small-box");
	let oBigBox = document.querySelector(".big-box");
	let oMask = document.querySelector(".mask");
	let oLis = document.querySelectorAll("li");



	let mf = new Magnifier(oBox, oSmallBox, oBigBox, oMask, oLis);